<template>
	<view style="padding-bottom: 160rpx;">
		<view class="list flex align-center justify-center" v-for="(item,index) in carList" :key="index">
			<view class="list-box">
				<view class="list-box-server">
					服务类型：{{item.serviceName}}
				</view>
				<view class="list-box-server">
					车厢类型：{{item.typeName}}
				</view>
				<view class="list-box-server">
					车型：{{item.modelName}}
				</view>
				<view class="list-box-server">
					车牌号：{{item.numberPlate}}
				</view>
				<view class="list-box-btom flex align-center justify-between">
					<view class="list-box-btom-time">
						{{item.createTime}}
					</view>
					<view class="list-box-btom-btn flex align-center">
						<u-icon @click="deleteCar(item)" name="trash" style="margin-right: 20rpx;" color="#000"
							size="40"></u-icon>
						<u-icon @click="upDataCar(item)" name="edit-pen" color="#000" size="40"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<empty v-if="carList.length == 0" />
		<!-- 添加按钮 -->
		<view v-if="carList.length == 0" class="addButton flex align-center justify-center">
			<view @click="goNav('/my/car/addCar')" class="addButton-box flex align-center justify-center">
				添加车辆
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				pages: 1,
				limit: 10,
				carList: [],
			};
		},
		onShow() {
			this.getMyCarList()
		},
		onReachBottom() {
			if (this.page < this.pages) {
				this.page += 1
				this.getMyCarList()
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getMyCarList()
		},
		methods: {
			//修改车辆
			upDataCar(item) {
				uni.navigateTo({
					url: '/my/car/addCar?carId=' + item.carId
				})
			},
			//删除车辆
			deleteCar(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除该车辆吗？',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								carId: item.carId
							}
							that.$Request.getT('/app/userCar/deleteCar', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '已删除'
									})
									that.getMyCarList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//获取我的车辆列表
			getMyCarList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.getT('/app/userCar/getMyCarList', data).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 0) {
						this.pages = res.data.pages
						if (this.page == 1) {
							this.carList = res.data.records
						} else {
							this.carList = [...this.carList, ...res.data.records]
						}
					}
				})
			},
			//跳转
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.list {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.list-box {
			width: 686rpx;
			height: 100%;
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
		}

		.list-box-server {
			margin-bottom: 20rpx;
		}

		.list-box-btom-time {
			color: #999999;
		}
	}

	.addButton {
		width: 100%;
		height: 140rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;

		.addButton-box {
			width: 686rpx;
			height: 100rpx;
			background-color: #02B595;
			border-radius: 8rpx;
			color: #ffffff;
		}
	}
</style>